<template>
  <div id="title" style="text-align: center;">
    <el-card style="max-width: 480px;margin: auto;padding-bottom: 15px;">
      <p>用户注册</p>
      <el-input v-model="name" style="width: 300px" placeholder="请输入用户名" clearable /><br><br>
      <el-input v-model="password" style="width: 300px" placeholder="请输入密码" clearable show-password /><br><br>
      <el-select v-model="sex" clearable placeholder="请选择性别" style="width: 300px">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select><br><br>
      <el-input v-model="phone" style="width: 300px" placeholder="请输入手机号" clearable /><br><br>
      <el-button type="primary" @click="register" style="width: 200px;">注册</el-button><br><br>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import router from '@/router';
// 注册角色选择
const sex = ref('')
const phone = ref('')
const options = [
  {
    value: '0',
    label: '保密',
  },
  {
    value: '1',
    label: '男',
  },
  {
    value: '2',
    label: '女',
  }
]
// 角色列表
function getdata() {
  axios.get(url)
    .then(res => {
      console.log(res)
      options.value = res.data.data
    })
    .catch(err => {
      console.error(err);
    })
}
const message = ref('Hello, Vue 3!');
const name = ref('')
const password = ref('')
const data = ref({
  name: name,
  password: password,
  sex: sex,
  phone: phone
})
function get_null(data) {
  if (data == null || data == '') {
    return true
  }
  return false
}
function register() {
  if (get_null(name.value) || get_null(password.value)) {
    ElMessage("请输入用户名密码")
    return
  }
  axios.post("http://127.0.0.1:8000/user/login", data.value)
    .then(res => {
      console.log(res)
      if (res.data.status == 200) {
        alert(res.data.message)
        router.push("/")
      } else {
        alert(res.data.message)
      }
    })
    .catch(err => {
      console.error(err);
    })
}
onMounted(() => {
  // Your code here
});

// 在组件卸载前执行的操作
onUnmounted(() => {
  // Your code here
});
</script>
<style>
#title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 90vb;
}

.el-link {
  margin-right: 8px;
}
</style>